Skip to content

Conversation

thecalamiity
Copy link
Contributor

Prerequisites checklist

What is the purpose of this pull request?

This PR fixes a regression in the no-invalid-properties rule where it incorrectly reports for valid CSS properties containing var() usage within functions like calc().

What changes did you make? (Give an overview)

  • Updated the validation logic to properly handle CSS variables when they appear inside functions.
  • Added tests to verify correct behavior for variables in functions

Related Issues

Fixes #223

Is there anything you'd like reviewers to focus on?

@github-project-automation github-project-automation bot moved this to Needs Triage in Triage Aug 4, 2025
@eslint-github-bot eslint-github-bot bot added the bug Something isn't working label Aug 4, 2025
@lumirlumir lumirlumir added the accepted There is consensus among the team that this change meets the criteria for inclusion label Aug 12, 2025
@lumirlumir lumirlumir moved this from Needs Triage to Implementing in Triage Aug 12, 2025
@nzakas
Copy link
Member

nzakas commented Aug 26, 2025

Can you check the test failures?

Copy link
Contributor

@snitin315 snitin315 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We have one false positive, can you please check?

/* eslint css/no-invalid-properties: "error" */

:root { 
    --dynamic-width: calc(20px + 10px); 
    --dynamic-width-2: calc(var(--dynamic-width) + 10px); 
}
  
.div { width: calc(100% - var(--dynamic-width)); } // ok
.div2 { width: calc(100% - var(--dynamic-width-2)); } // Error Unknown property 'width' found

@thecalamiity
Copy link
Contributor Author

@snitin315 I looked into it but wasn't able to reproduce the false positive. To be thorough, I've added a test case for this scenario, and it's currently passing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accepted There is consensus among the team that this change meets the criteria for inclusion bug Something isn't working
Projects
Status: Implementing
Development

Successfully merging this pull request may close these issues.

Rule Change: no-invalid-properties incorrectly reports for valid CSS with var() in functions
4 participants